<template>
  <div class="container">
    <div class="banner"></div>
    <div class="content">
      <div class="content-inner">
        <img class="logo-image" alt="logo" :src="logo" />
        <!-- 若要保存Form数据，增加keep-alive -->
        <LoginForm
          v-if="loginMethod === LoginMethods.password"
          @change-login="changeLoginMethod"
        />
        <ForgetForm
          v-if="loginMethod === LoginMethods.forget"
          @change-login="changeLoginMethod"
        />
        <ScanCode
          v-if="loginMethod === LoginMethods.ercode"
          @change-login="changeLoginMethod"
        />
      </div>
      <div class="footer">
        <Footer />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Footer from '@/components/footer/index.vue';
  import logo from '@/assets/images/logo.png';
  import LoginForm from './components/login-form.vue';
  import ForgetForm from './components/forget-form.vue';
  import ScanCode from './components/scan-code.vue';
  import LoginMethods from './constant';

  const loginMethod = ref(LoginMethods.password);
  const changeLoginMethod = (method: LoginMethods) => {
    loginMethod.value = method;
  };
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    height: 100vh;

    .banner {
      width: 1262px;
      height: 100%;
      background: url('@/assets/images/login-bg.png') no-repeat;
    }

    .content {
      position: relative;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      padding: 0 40px 40px;
    }

    .footer {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
    }
    :deep(.arco-input-wrapper) {
      .arco-input-prefix {
        color: rgb(var(--primary-6));
      }
    }
    :deep(.arco-btn-text[type='button']) {
      padding: 0;
    }
  }

  .logo-image {
    display: inline-block;
    width: 369px;
    height: 100px;
  }
</style>

<style lang="less">
  .login-form {
    &-password-actions {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
